<!-- 已发货详情页面 -->
<template>
  <div class="wait-send-detail">
    <el-dialog title="订单详情" :visible.sync="dialogVisible1" top="5%" :before-close="handleClose"
      :close-on-click-modal="false" :close-on-press-escape="false">
      <template slot="title">
        <span
          style="color: rgba(52, 69, 99, 1); font-size: 18px;font-weight: bold; margin-left: 5px;margin-top: 34px;">订单详情</span>
      </template>

      <div style="height: 60%;background-color: white;width:100% ;padding: none;">
        <div style="margin-left: 5px;width: 100%;height: 35rem;overflow-y: auto;">
          <!-- 已发货详情页面内容 -->
          <div style="width: 100%">
            <div class="order-info-title">订单信息</div>
            <el-divider direction="horizontal" style="left: 474px;
                        top: 237.5px;
                        font-size: none;
                        height: 0px;
                        opacity: 1;
                        border: 1px solid rgba(235, 238, 242, 1);"></el-divider>
            <div class="order-info">

              <div style="display: flex;margin-top: 24.5px;">
                <div class="ziti" style="display: flex;margin-left: 21px;">订单编号：<div>
                    {{ tableData.id }}</div>
                </div>
                <div class="ziti" style="display: flex;margin-left:240px ;">订单时间：<div>{{ time }}</div>
                </div>
              </div>
              <div>
                <div class="product-info-title">商品信息</div>
                <el-divider direction="horizontal" style="left: 474px;
                        top: 237.5px;
                        width: 1002px;
                        height: 0px;
                        opacity: 1;
                        margin-top: 12.5px;
                        border: 1px solid rgba(235, 238, 242, 1);"></el-divider>
                <div style="margin-right: 15px;color: black;width: 90%;margin-top: 22px;">
                  <ProductInfoTable v-if="tableData.listProductOrderInfos.length > 0" :infodetail="info"
                    :data="tableData.listProductOrderInfos" :price="tableData.orderAmount"></ProductInfoTable>
                  <div v-else style="margin-left: 28px; margin-top: 22px;color: rgba(52, 69, 99, 1);font-size: 14px;">
                    暂无商品信息
                  </div>
                </div>
              </div>

              <div
                style="color: rgba(52, 69, 99, 1); font-size: 16px;margin-top: 29px; letter-spacing: 2px;font-weight: bold;margin-bottom: 12.5px;">
                备注：</div>
              <div style="width: 100%; margin-top: 12.5px;">
                <el-divider direction="horizontal" style="left: 474px;
                        
                        height: 0px;
                        
                        border: 1px solid rgba(235, 238, 242, 1);"></el-divider>
              </div>
              <div style=" margin-left: 28px;font-size: 14px;color: rgba(52, 69, 99, 1);margin-top: 16px;">
                <div v-show="tableData.remark !== null">{{ tableData.remark }}</div>
                <div v-show="tableData.remark === null"> 暂无备注信息 </div>
              </div>
            </div>

            <div class="detail-info">
              <div style="margin-left: 29px;padding: 19px 0px 0px 0px;">
                <div>
                  <div style="font-size: 14px;font-weight: bold;color: rgba(52, 69, 99, 1);">收货人信息:</div>
                  <div style="margin-left: 12px;color: rgba(52, 69, 99, 1);">
                    <div class="margintop"
                      style="margin-top: 12px; display: flex;font-size: 12px; color: rgba(52, 69, 99, 1);">
                      收货人：
                      <div style="margin-left: 50px;letter-spacing: 3px; color: rgba(52, 69, 99, 1);">{{
                        tableData.receiverName }}</div>
                    </div>
                    <div class="margintop"
                      style="margin-top: 7px; display: flex;font-size: 12px;color: rgba(52, 69, 99, 1);">
                      联系电话：
                      <div style="margin-left: 35px;letter-spacing: 1px; color: rgba(52, 69, 99, 1);">{{
                        tableData.receiverPhone }}</div>
                    </div>
                    <div class="margintop"
                      style="margin-top: 7px; display: flex;font-size: 12px;color: rgba(52, 69, 99, 1);">
                      收货地址：
                      <div v-if="tableData.receiverDetailAddress !== ''"
                        style="margin-left: 35px;letter-spacing: 1px; color:rgba(52, 69, 99, 1) ;">{{
                          tableData.receiverDetailAddress }}</div>
                      <div v-else style="margin-left: 35px;letter-spacing: 1px; color:rgba(52, 69, 99, 1) ;">暂无</div>
                    </div>
                    <div class="margintop"
                      style="margin-top: 7px; display: flex;font-size: 12px;color: rgba(52, 69, 99, 1);">
                      配送方式：
                      <div v-if="tableData.deliveryType !== null"
                        style="margin-left: 35px;letter-spacing: 1px; color:rgba(52, 69, 99, 1) ;">{{
                          getTradeType(tableData.tradeType) }}</div>
                      <div v-else style="margin-left: 35px;letter-spacing: 1px; color:rgba(52, 69, 99, 1) ;">暂无</div>
                    </div>
                  </div>
                </div>
                <div style="color: rgba(52, 69, 99, 1);margin-top: 31px;margin-left: 5px;">
                  <div style="font-size: 14px;font-weight: bold;color: rgba(52, 69, 99, 1);">付款信息:</div>
                  <div style="margin-left: 6px;">
                    <div class="margintop"
                      style="margin-top: 12px; display: flex;font-size: 12px;color: rgba(52, 69, 99, 1);">
                      实付金额：
                      <div style="margin-left: 35px;letter-spacing: 1px; margin-top: 1px;">
                        <el-statistic group-separator=","
                          :value-style="{ color: 'rgba(52, 69, 99, 1)', fontSize: '12px' }"
                          :value="tableData.orderAmount" prefix="¥">
                        </el-statistic>
                      </div>
                    </div>
                    <div class="margintop"
                      style="margin-top: 7px; display: flex;font-size: 12px;color: rgba(52, 69, 99, 1);">
                      付款方式：
                      <div style="margin-left: 35px;letter-spacing: 1px; margin-top: 0.5px;">{{
                        getPayType(tableData.payType)
                      }}</div>
                    </div>
                    <div class="margintop"
                      style="margin-top: 7px; display: flex;font-size: 12px;color: rgba(52, 69, 99, 1);">
                      付款时间：
                      <div v-if="tableData.paymentTime !== null" style="margin-left: 35px;letter-spacing: 1px;">{{
                        tableData.paymentTime }}</div>
                      <div v-else style="margin-left: 35px;letter-spacing: 1px;">暂无</div>
                    </div>
                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>
      <template slot="footer">
        <el-button type="info" @click="closeDialog" style="font-size: 14px; height: 38px; margin-right: 8px">取
          消</el-button>
        <el-button @click="openDialog" style="width: 127px; margin-right: 5px">修改收货信息</el-button>
        <el-button @click="shipments()" style="background-color:rgba(90, 52, 179, 1);color: white ">发货</el-button>
      </template>
    </el-dialog>
    <ChangeAddressVue v-if="showchangeaddress" :recivername.sync="recivername" :dialogVisible2.sync="showchangeaddress"
      :reciverphone.sync="reciverphone" :reciveraddress.sync="reciveraddress" :orderID.sync="orderid" :addressID="id"
      @closeDialog="closeChangeAddress"></ChangeAddressVue>
      <Delivery :id.sync="orderid" :visible1.sync="showDelivery" @doneclose ="closedetail" @close="closeDelivery"></Delivery>
  </div>
</template>
<script>
import ProductInfoTable from "./ProductInfoTable.vue";
import { deliverGoods, getAddressList } from "@/api/api";
import Delivery from "./Delivery.vue";
import ChangeAddressVue from "./ChangeAddress.vue";

export default {
  name: "ToBeShippedOrderDetail",
  components: {
    ProductInfoTable,
    ChangeAddressVue,
    Delivery
  },
  data() {
    return {
      // 待发货详情页面数据
      tableData: this.data,
      value: 12345,
      // orderNo: "20210101001",
      orderTime: "20210101120000",
      value1: 5,
      message: "/",
      showDelivery: false,
      postdata: [],
      reverse: true,
      click: true,
      dialogVisible: this.dialogVisible1,
      info: [],
      Paytime: this.paytime,
      deliveryinfo: [],
      placeList: [],
      showchangeaddress: false,
      recivername: "", //收货人姓名
      reciverphone: "", //收货人电话
      reciveraddress: "", //收货人地址
      id: "", //地址id
      orderid: ""//订单id
    };
  },
  props: {
    dialogVisible1: {
      type: Boolean,
      default: false,
    },
    time: {
      type: String,
      default: "",
    },
    data: {
      type: Object,
      default: null,
    },
    paytime: {
      type: String,
      default: "",
    },
  },
  computed: {
    showDialog: {
      get() {
        return this.dialogVisible1;
      },
      set(val) {
        this.$emit("closeDialog", val);
      },
    },
  },
  watch: {
    time: {
      handler(val) {
        console.log("打印时间");
        console.log(val);
        this.getDetailData();
      },
    },
    data: {
      handler(val) {
        console.log("打印内部数据");
        console.log(val);
        this.tableData = val;
        this.getInfo(this.tableData.listProductOrderInfos);
      },
      deep: true,
    },
    paytime: {
      handler(val) {
        console.log("打印支付时间");
        console.log(val);
        this.tableData.paymentTime = val;
      },
    },
  },
  async created() {
    this.getLogisticsDetails();
    this.getInfo(this.tableData.listProductOrderInfos);
    this.getAddress();
  },
  methods: {
    //发货完成
     closedetail(data) {
        this.handleClose();
     },
    //打开修改收货信息弹窗
    openDialog() {
      this.showchangeaddress = true;
      console.log("打开修改收货信息弹窗");
      this.recivername = this.tableData.receiverName;
      this.reciverphone = this.tableData.receiverPhone;
      this.reciveraddress = this.tableData.receiverDetailAddress;
      this.orderid = this.tableData.id;
    },
    //关闭修改收货信息弹窗
    closeChangeAddress() {
      this.showchangeaddress = false;
    },
    //获取地址
    async getAddress() {
      const res = await getAddressList(1);
      console.log("打印地址：：：：：：：：：：");
      console.log(res);
      if (res.data.code === 200) {
        this.placeList = res.data.result.list;
        console.log(this.placeList);
        this.getAddressId(this.tableData.receiverName);
      } else {
        this.$message.error("获取地址失败");
      }
    },
    //返回位置id
    getAddressId(name) {
      for (let i = 0; i < this.placeList.length; i++) {
        if (this.placeList[i].name === name) {
          // console.log("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa")
          console.log(this.placeList[i].id);
          this.id = this.placeList[i].id;
        }
      }
    },
    //发货
    shipments() {
      this.showDelivery = true;
    },
    //关闭发货弹窗
    closeDelivery(data) {
      console.log("关闭发货弹窗");
      this.showDelivery = data;
    },
    //绑定icon
    bindicon(icon) {
      console.log(icon);
      var icon5 = "";
      if (icon === "post") {
        icon5 = "el-icon-box";
      } else if (icon === "delivery") {
        icon5 = "el-icon-truck";
      } else {
        icon5 = "el-icon-document-checked";
      }
      return icon5;
    },
    //获取配送方式
    getTradeType(tradeType) {
      if (tradeType === 1) {
        return "快递";
      } else if (tradeType === 2) {
        return "自提";
      } else {
        return " ";
      }
    },
    //获取支付方式
    getPayType(payType) {
      if (payType === 0) {
        return "待支付";
      } else if (payType === 1) {
        return "支付宝";
      } else if (payType === 2) {
        return "微信";
      } else if (payType === 3) {
        return "线下支付";
      } else {
        return "其他";
      }
    },
    //绑定颜色
    bindcolor(color) {
      if (color === "post") {
        return "rgba(191, 202, 222, 1)";
      } else if (color === "delivery") {
        return "rgba(191, 202, 222, 1)";
      } else {
        return "rgba(255, 87, 51, 1)";
      }
    },
    // 返回上一页
    goBack() {
      //   this.$router.go(-1);
      console.log("返回上一页");
    },
    // 获取物流详情数据
    getLogisticsDetails() { },
    change(data) {
      this.click = data;
    },
    closeDialog() {
      // 当点击关闭按钮时，更新本地数据并发出事件通知父组件
      this.dialogVisible1 = false;
      this.$emit("update:dialogVisible1", false);
    },

    //获取并且将详情转化为JSON格式
    getInfo(data) {
      console.log("获取详情数据");
      console.log(data);
      for (let i = 0; i < data.length; i++) {
        this.info.push(JSON.parse(data[i].spData));
      }
      //答应内部数据
      console.log("info数据内容：");
      console.log(this.info);
    },
    // 点击发货按钮
    handleSend() {
      console.log("发货");
    },
    // 点击修改收货信息按钮
    handleEdit() {
      console.log("修改收货信息");
    },
    // 点击取消按钮
    handleCancel() {
      console.log("取消");
    },
    //点击close按钮
    handleClose() {
      this.$emit("closeDialog", false);
      // this.$emit("close");
    },
    handle() {
      this.showchangeaddress = false;
    }
  },
};
</script>

<style scoped>
/* 待发货详情页面样式 */

.wait-send-detail {
  background-color: white;
  width: 100%;
  height: 550px;
  /* margin-left: 17%; */
}

.product-info-title {
  left: 474px;
  top: 312px;
  width: 64px;
  height: 23px;
  opacity: 1;
  /** 文本1 */
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0px;
  line-height: 22.4px;
  color: rgba(52, 69, 99, 1);
  text-align: left;
  vertical-align: top;
  margin-top: 30px;
}

.detail-info {
  left: 474px;
  top: 1805px;
  width: 1002px;
  height: 505px;
  opacity: 1;
  background: rgba(247, 249, 252, 1);
  /* padding: 18px 29px; */
  margin-top: 30px;
}

.ziti {
  /* font-size: 14px; letter-spacing: 1px;color: rgba(52, 69, 99, 1); display: flex; */
  left: 496px;
  top: 262px;
  /* width: 188px; */
  height: 20px;
  opacity: 1;
  /** 文本1 */
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0px;
  line-height: 19.6px;
  color: rgba(52, 69, 99, 1);
  text-align: left;
  vertical-align: top;
  /* margin-top: 30px; */
}

.divider {
  left: 474px;
  top: 347.5px;
  width: 1002px;
  height: 0px;
  opacity: 1;
  border: 1px solid rgba(235, 238, 242, 1);
}

.order-info-title {
  left: 474px;
  top: 202px;
  width: 64px;
  height: 23px;
  opacity: 1;
  /** 文本1 */
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0px;
  line-height: 22.4px;
  color: rgba(52, 69, 99, 1);
  text-align: left;
  vertical-align: top;
  /* margin-top: 34px; */
  /* margin-left: 1.3rem; */
}

.order-info {
  /* margin-left: 1.3rem; */
  color: black;
}

.el-header {
  background-color: white;
  height: 1.3rem;
  color: #333;
  text-align: left;
}

.margintop {
  font-size: 0.9rem;
  font-weight: 500;
  margin-top: 0.99rem;
  margin-left: 2%;
}

.el-dialog__body {
  padding: 20px 20px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
}

body>.el-container {
  margin-bottom: 2.9rem;
}

.el-button--purple {
  background-color: #722ed1;
  /* 紫色背景 */
  border-color: #722ed1;
  /* 紫色边框 */
  color: #fff;
  /* 白色文字 */
}

.el-divider--horizontal {
  display: block;
  height: 1px;
  width: 1002px;
  margin-top: 12.5px;
  /* margin: 24px 0; */
}

.el-container {
  /* width: 100vw; */
  height: 100vh;
  background-color: rgba(247, 249, 250, 1);
}
</style>